<template>
  <el-cascader
    ref="cascader"
    v-model="currValue"
    :options="areaList"
    :props="{
      value: 'id',
      label: 'text',
      children: 'children',
      leaf: 'isLeaf',
      checkStrictly: props.checkStrictly
    }"
    :size="props.size"
    filterable
    clearable
    @change="handleChange"
    style="width: 100%"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useAreaStore } from "@/pinia/modules/area";

const modelValue = defineModel();
const props = defineProps({
  checkStrictly: {
    type: Boolean,
    default: false
  },
  size: String,
});

const areaStore = useAreaStore();
const areaList = ref([]);
const cascader = ref();
const currValue = ref([]);

const handleChange = () => {
  if (currValue.value && currValue.value.length > 0) {
    modelValue.value = currValue.value.join(',');
  }
  cascader.value.togglePopperVisible();
};

onMounted(() => {
  currValue.value = modelValue.value ? modelValue.value.split(',') : [];
  areaStore.getAreaList().then(res => {
    areaList.value = res;
  });
});
</script>